<!-- 图像数据 -->
<template>
	<view class="page">
		<template v-if="token&&isLogin">
			<view class="search-data">
				<view class="fix-wrap">
					<view class="select-bar">
						<navigator :url="'/package_common/search_tool/search_tool?dev_type='+dev_type+'&typeid='+select_dev.typeid" hover-class="none"
							class="change-btn">
							<view class="select-data">{{select_dev.name}}</view>
							<view class="iconfont f-s24">&#xe623;</view>
						</navigator> 
					</view>
					<view class="date-bar">
						<view class="date start-date" @click="changeDate(1)">
							<input type="text" v-model="params.startDate" placeholder="选择开始时间" disabled="true" class="inp">
						</view>
						<view class="date end-date" @click="changeDate(2)">
							<input type="text" v-model="params.overDate" placeholder="选择结束时间" disabled="true" class="inp">
						</view>
						<view class="btn" @click="search">查询</view>
					</view>
				</view>
			</view>
			
			<view class="body">				
				<template v-if="!loadingState.default">
					<template v-if="list.data.length>0">				
						<view class="list-wrap">
							<view class="item" v-for="(item,index) in list.data" :key="index">
								<view class="pic" @click="previewBigPic(item.photo_path)">
									<image :src="web_host+'/image/compress.html?from=miaoqing&path='+item.photo_path" mode="widthFix" class="img"></image>
								</view>								
								<view class="time">{{item.photo_date}}</view> 								
							</view>
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					<empty v-else msg="没有相关信息"></empty>
				</template>
				<template v-else>
					<loading :loadingState="loadingState"></loading>
				</template>
			</view> 
		</template>
		
		<!-- 弹窗 -->
		<view v-if="flag.isFullPage" class="full-fix-page a-fadein">
			<!-- 日期 -->
			<laydate v-if="flag.isSeleceDate" :type="params.date_type" @selectDate="selectDate" @closeDate="closeDate" @clearDate="clearDate"></laydate>
			
		</view>
	</view>
</template>

<script> 
	import loading from '@/components/loading-more.vue'
	import laydate from '@/components/laydate.vue'
	import empty from '@/components/empty.vue'
	import { previewImage } from '@/common/util.js'
	import {HOST} from '@/config.js'
	export default {
		name: 'name',
		data() {
			return {
				isLogin: false,
				token: uni.getStorageSync('token'),
				userInfo:uni.getStorageSync('userInfo'),
				appid:getApp().globalData.appid,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				dev_type:'',				
				list:{
					data:[]
				},
				flag:{		// 弹窗相关
					isFullPage:false,  
					isSeleceDate:false 
				},
				select_dev:{
					id:'',
					name:'',
					typeid:'',
					update:false
				},
				params:{
					page:1,
					limit:10,
					order:'desc',
					startDate:'',
					overDate:'',
					date_type:'',
				},
				web_host:HOST
			}
		},
		async onLoad(params) {			
			this.dev_type = params.dev_type;
			this.select_dev.id = params.dev_id;
			this.select_dev.name = params.dev_name; 
			 
			if(params.typeid){
				this.select_dev.typeid=params.typeid;
			}
			
			if(this.token){
				this.isLogin=await this.$loginState('check');  
				if(this.isLogin){  
					this.getJianKongData();
				}else{
					this.isLogin=await this.$loginState('reset');
				}
			} 
		},
		async onShow() {
			
			// 登录状态更新
			if(this.loginStateUpdate){
				this.token=uni.getStorageSync('token');
				this.userInfo=uni.getStorageSync('userInfo'); 
				this.isLogin=true;
				this.loginStateUpdate=false;
			}
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}
			
			// 设备切换
			if(this.select_dev.update){
				this.dataInit(); 
				this.getJianKongData();
				this.select_dev.update=false;
			}
			
			
		},
		onReachBottom() {
			if(this.loadingState.completed){
				this.params.page=1;
				return false
			}else{ 
				this.params.page++; 
				this.getJianKongData();
			}		
		},
		methods: {
			
			dataInit:function(){
				this.params.page=1;
				this.list.data=[];
				this.loadingState.default=true;
				this.loadingState.loading=false;
				this.loadingState.completed=false;
			},
			
			getJianKongData:async function(){
				let res=await this.$api.tool_api.getJianKongData({
					appid:this.appid,
					token:this.token,
					user_id:this.userInfo.uid,
					page:this.params.page,
					limit:this.params.limit,
					device_id:this.select_dev.id,
					order:this.params.order,
					startDate:this.params.startDate,
					overDate:this.params.overDate, 
				}) 
				if(res.data.ret==1000){
					if(res.data.data){
						this.list.data=this.list.data.concat(res.data.data);
						if(res.data.data.length<this.params.limit){ 
							this.loadingState.default=false;
							this.loadingState.loading=false;
							this.loadingState.completed=true;
						}else{ 
							this.loadingState.default=false;
							this.loadingState.loading=true;
						}				
					}else{
						this.loadingState.default=false;
					}
					
				}else if(res.data.ret==1002){
					this.loadingState.default=false;
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}  
			},
			
			// 查看大图
			previewBigPic:function(img_path){
				let data=[this.web_host+'/image/preview.html?from=miaoqing&path='+img_path];
				previewImage({
					data:data,
					index:0
				})				
			},
			
			// 打开选择查询日期组件
			changeDate:function(type){
				//type ==1 开始日期 2 终止日期
				this.params.date_type=type;
				this.showPopup('show','isSeleceDate'); 
			},
			
			// 弹窗
			showPopup:function(type,name){
				if(type=='show'){
					this.flag.isFullPage=true;
					this.flag[name]=true;
				}else if(type=='hide'){
					for(let i in this.flag){
						this.flag[i]=false;
					} 
				}
			},
 
			
			// 选择日期
			selectDate:function(data){ 
				this.flag.isFullPage=false;
				this.flag.isSeleceDate=false;
				if(data.type==1){
					this.params.startDate=data.date;
				}else{
					this.params.overDate=data.date;
				}
			},
			
			// 关闭日期控件
			closeDate:function(){
				this.showPopup('hide')
			},
			
			// 清空日期
			clearDate:function(data){ 
				this.flag.isFullPage=false;
				this.flag.isSeleceDate=false;
				this.params.startDate=''; 
				this.params.overDate='';
			},
			
			search:function(){
				this.dataInit();
				this.getJianKongData();
			}
		},
		components: { 
			loading,
			laydate,
			empty
		},
		computed: {
			 
		},
		watch: {
			 
		}

	}
</script>

<style lang="less">
	.list-wrap{
		display: flex;
		flex-wrap: wrap;
		padding-left:20rpx;		
		.item{
			width:47%;
			margin:0 20rpx 20rpx 0; 
			background: #fff;
			border-top-left-radius: 15rpx; 
			border-top-right-radius: 15rpx; 
			.pic{
				display: flex;
				justify-content: center;
				align-items: center; 
				.img{
					border-top-left-radius: 15rpx;
					border-top-right-radius: 15rpx;
				}				
			}			 
			.time{
				background: rgba(0,0,0,.8);
				padding:5rpx 10rpx;
				font-size: 30rpx;
				color:#fff;
			}
		}
	}
 
	.select-bar{
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx 0 0;
	}
	 
</style>
